深入浅出webpack学习(15)--管理多个单页应用

在实际应用中一个完整的系统不会把所有的功能都做到一个网页中，因为这会导致网页性能不佳。实际的做法是按照功能模块划分成多个单页应用，每个单页应用生成一个HTML文件。之前我们解决了自动化生成HTML文件，接下来继续改造上一节的例子：

1. 项目目前共有两个单页应用组成，一个是主页index.html, 一个是login.hml
2. 多个单页应用之间会有公共代码部分，需要将这些公共代码部分抽离出来放到单独的文件中防止重复加载。
3. 随着业务的发展，后面可能会不断的加入新的单页应用，但是每次新加入单页应用不能去改动构建相关的代码。

按照上节的思路，可能要为每个单页应用配置一段如下代码：

new WebPlugin({
    template: "./template.html", //HTML模板文件所在的文件路径
    file: "login.html" //输出的HTML的文件名称
})

并且把页面对应的入口加入到entry配置项中，就像这样：

entry: {
    index: "./page/index/index.js", //页面index.html的入口文件
    login: "./page/login/index.js"， //页面login.html的入口文件
}

当有新页面加入时就需要修改webpack配置文件，新插入一段以上代码，这会导致构建代码难以维护并且易错。

解决方案

上一节中的web-webpack-plugin插件也内置了这个解决办法，上一节只用了他的webPlugin，这节将使用它的AutoWebPlugin来解决以上问题。
项目源码结构如下：

├── pages
│   ├── index
│   │   ├── index.css // 该页面单独需要的 CSS 样式
│   │   └── index.js // 该页面的入口文件
│   └── login
│       ├── index.css
│       └── index.js
├── common.css // 所有页面都需要的公共 CSS 样式
├── google_analytics.js
├── template.html
└── webpack.config.js

从目录结构中可以看出以下几点要求：

1. 所有单页应用的代码都需要放到一个目录下：例如pages目录下；
2. 一个单页应用一个单独的文件夹，例如最后胜出index.html相关的代码都在index目录下
3. 每个单页应用的目录下都有一个index.js文件作为入口执行文件。

虽然 AutoWebPlugin 强制性的规定了项目部分的目录结构，但从实战经验来看这是一种优雅的目录规范，合理的拆分了代码，又能让新人快速的看懂项目结构，也方便日后的维护。

webpack配置文件修改如下：

const { AutoWebPlugin } = require("web-webpack-plugin")

// 使用本文的主角 AutoWebPlugin，自动寻找 pages 目录下的所有目录，把每一个目录看成一个单页应用
const autoWebPlugin = new AutoWebPlugin('pages', {
  template: './template.html', // HTML 模版文件所在的文件路径
  postEntrys: ['./common.css'],// 所有页面都依赖这份通用的 CSS 样式文件
  // 提取出所有页面公共的代码
  commonsChunk: {
    name: 'common',// 提取出公共代码 Chunk 的名称
  },
});

module.exports = {
  // AutoWebPlugin 会为寻找到的所有单页应用，生成对应的入口配置，
  // autoWebPlugin.entry 方法可以获取到所有由 autoWebPlugin 生成的入口配置
  entry: autoWebPlugin.entry({
    // 这里可以加入你额外需要的 Chunk 入口
  }),
  plugins: [
    autoWebPlugin,
  ],
};

AutoWebPlugin会找出pages目录下的2个文件夹index和login，把这两个文件夹看成两个单页应用。并且分别为每个单页应用生成一个Chunk配置和WebPlugin配置。每个单页应用的Chunk名称就等于文件夹的名称，也就是说autoWebPlugin.entry()方法返回的内容其实是：

{
  "index":["./pages/index/index.js","./common.css"],
  "login":["./pages/login/index.js","./common.css"]
}

但这些事情 AutoWebPlugin 都会自动为你完成，你不用操心，明白大致原理即可。